<template>
  <div style="z-index:7;left: 0;top: 0;position: fixed;height: 100%;width: 100%;background-color:white;text-align:center">
    <div class="zhezhao"></div>
    <img src="../../../../assets/changepsw/back.png" class="img_back" @click="goback">
    <div class="div1">
        邮箱详情
    </div>
    <div class="div2">
        <ImgEmail class="img_email"></ImgEmail>
        <div style="opacity:0" v-show="!ShowLater">
            <div style="margin-top:10px;margin-bottom:10px;">占位
            </div>
            <div><span class="span1"></span></div>
        </div>
        <div v-if="!email&&ShowLater" :style="ShowOpacity">
            <div style="margin-top:10px;margin-bottom:10px">当前用户未绑定邮箱
            </div>
            <div><span class="span1" @click="newemail()">添加</span></div>
        </div>
        <div v-if="email&&ShowLater" :style="ShowOpacity">
            <div style="margin-top:10px;margin-bottom:10px">您的邮箱号：
                <span>{{email.slice(0,2)}}******{{email.slice(email.length-8)}}</span>
            </div>
            <div><span class="span1" @click="newemail()">更换</span></div>
        </div>
    </div>
  </div>
</template>

<script>
import ImgEmail from './img/email/img_email.vue'
export default {
    name:'email',
	data(){
		return{
			email:'',
            ShowLater:0,
            ShowOpacity:'',
		}
	},
    components:{ImgEmail},
    methods:{
        goback(){this.$router.replace({name:'infoshow'})},
        newemail(){this.$router.push({name:'newemail',params:{'email':this.email}})},
    },
    mounted(){
        setTimeout(() => {
            this.ShowLater=1
        }, 200);
        let num =0
        this.ShowOpacity='opacity:'+num+';'
        var id = setInterval(() => {
            if(num >=1){
                clearInterval(id)
            }else{
                this.ShowOpacity='opacity:'+num+';'
                num+=0.05
            }
        }, 50);
        this.$addr.get(`user/get_by_uid`).then(
            response=>{
                console.log('获取用户数据请求成功',response.data);
                if(response.data.data.email != null && response.data.data.email != ''){
                    this.email=response.data.data.email
                }
            },error=>{
                this.$message({
                    message:'获取用户数据请求失败，请重新登陆',
                    type:'error'
                })
                console.log("获取用户数据请求失败",error.message);
                //this.$router.replace({name:'login'})
            }
        )
    },
}
</script>

<style scoped>
.img_email{
    width: 50%;
    height: 60%;
    border-radius: 25px;
    box-shadow: 0px 2px 4px 1px rgb(255, 180, 231);
    z-index: 2;
}
.div1{
    background: linear-gradient(to right,rgb(255, 182, 238),rgb(255, 113, 236));
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 23px;
    padding-bottom: 15px;
    user-select: none;
}
.img_back{
    position: fixed;
    margin-top: 28px;
    left: 14px;
    height: 18px;
}
.zhezhao{
    width: 100%;
    height: 100%;
    background-color: rgb(252, 245, 252);
    opacity: 0.4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.div2{
    margin-left: 15px;
    margin-right: 15px;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    margin-top: 20px;
    font-size: 17px;
    padding-top: 30px;
    padding-bottom: 25px;
    box-shadow: -10px 10px 80px -10px rgb(255, 193, 234) inset;
}
.span1{
    font-size: 13px;
    padding: 8px;
    padding-left: 13px;
    padding-right: 13px;
    background-color: rgb(234, 234, 234);
    border-radius: 12px;
}
</style>